<template>
    <div>
        <el-table :data="tableData" border style="width: 100%" #default="scope">
            <el-table-column prop="pid" label="序号" align="center" />
            <el-table-column prop="ptype" label="问题类型" align="center" />
            <el-table-column prop="createDate" label="创建时间" align="center" />

            <el-table-column label="操作" align="center">

                <template #default="scope">
                    <el-button type="danger" @click="del(scope.$index, scope.row)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
        <page></page>
    </div>
</template>

<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { ref } from 'vue'
import axios from 'axios'
import page from './page.vue'
export default {
    name: "list",
    setup() {
        let tableData = ref([])
        axios({
            url: "http://1.14.73.59:8080/Problem/findProblemList ",
            method: "get"
        }).then(
            resp => {
                console.log(resp.data);
                tableData.value = resp.data.data
            }
        )

        const del = (index, row) => {
            ElMessageBox.confirm('确定删除该数据?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                axios({
                    url: 'http://1.14.73.59:8080/Problem/delProblemmsg',
                    method: 'post',
                }).then((res) => {
                    if (res.data.code === 200) {
                        ElMessage({
                            type: 'success',
                            message: '删除成功!'
                        });
                        tableData.value.splice(index, 1)

                    } else {
                        ElMessage({
                            type: 'error',
                            message: '删除失败!'
                        });
                    }
                }).catch((err) => {
                    console.log('错误了', err);
                })
            }).catch(() => {
                //点击了取消按钮
                ElMessage({
                    type: 'info',
                    message: '已取消删除'
                });
            });
        }
        return {
            ref,
            del,
            tableData,
            ElMessage,
            ElMessageBox
        }
    }
}
</script>
<style scoped>
.demo-pagination-block+.demo-pagination-block {
    margin-top: 10px;
}

.demo-pagination-block .demonstration {
    margin-bottom: 16px;
}
</style>

